{{ template "head" . }}

<div class="container">
    <div class="section">
        <div class="row">
            <h5>当前版本号：{{.CCC.ActiveVersion}}</h5>
        </div>
        <div class="row">
            <a class="btn blue waves-effect modal-trigger" href="#add-config">添加配置项</a>
            <a class="btn blue waves-effect modal-trigger" href="#new-version">新版本</a>
            <a class="btn blue waves-effect modal-trigger" href="#change-version">切换版本</a>
        </div>
        </div>
    </div>
    <div class="section">
        <!--DataTables example-->
        <div id="table-datatables">
            <div class="row">
                <table id="data-table-simple" class="responsive-table display" cellspacing="0">
                    <thead>
                    <tr>
                        <th>项目ID</th>
                        <th>项目名称</th>
                        <th>环境</th>
                        <th>配置名称</th>
                        <th>配置值</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tfoot>
                    <tr>
                        <th>项目ID</th>
                        <th>项目名称</th>
                        <th>环境</th>
                        <th>配置名称</th>
                        <th>配置值</th>
                        <th>操作</th>
                    </tr>
                    </tfoot>

                    <tbody>
                        {{range .CCC.Conf}}
                        <tr>
                            <td>{{$.CCC.ProjectId}}</td>
                            <td>{{$.CCC.Name}}</td>
                            <td>{{$.CCC.Env}}</td>
                            <td>{{.conf_key}}</td>
                            <td>{{.conf_value}}</td>
                            <td>
                                <a class="btn blue waves-effect" onclick="delConfig(this,{{.conf_key}})">删除</a>
                                <a class="btn blue waves-effect modal-trigger" href="#edit-config" onclick="editConfig({{.conf_key}},{{.conf_value}})">编辑</a>
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Floating Action Button -->
    <div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
        <a class="btn-floating btn-large">
            <i class="mdi-action-stars"></i>
        </a>
        <ul>
            <li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a></li>
            <li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a></li>
            <li><a href="app-calendar.html" class="btn-floating green"><i class="large mdi-editor-insert-invitation"></i></a></li>
            <li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
        </ul>
    </div>
    <!-- Floating Action Button -->
</div>

</section>

{{ template "foot" }}

<div id="add-config" class="modal">
    <div class="modal-content">
        <div class="row">
            <h5 class="left">添加配置</h5>
        </div>
    </div>
    <div class="divider"></div>
    <div class="modal-content">
        <div class="row">
            <form id="add-config-form" method="post" action="/config/add">
                <div class="row">
                    <div class="input-field col s6">
                        <input id="add-key" name="add-key" type="text">
                        <label for="add-key">key</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="add-value" name="add-value" type="text">
                        <label for="add-value">value</label>
                    </div>
                    <div>
                        <input name="id" type="hidden" value="{{.CCC.ProjectId}}">
                        <input name="name" type="hidden" value="{{.CCC.Name}}">
                        <input name="env" type="hidden" value="{{.CCC.Env}}">
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <a class="waves-effect waves-red btn-flat modal-action modal-close right">取消</a>
                        <button class="btn blue waves-effect right submit" type="submit" name="action" onclick="return checkAddConfig()">确定
                            <i class="mdi-content-send right"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="edit-config" class="modal">
    <div class="modal-content">
        <div class="row">
            <h5 class="left">修改配置</h5>
        </div>
    </div>
    <div class="divider"></div>
    <div class="modal-content">
        <div class="row">
            <form id="edit-config-form" method="post" action="/config/edit">
                <div class="row">
                    <div class="input-field col s6">
                        <input id="edit-key" name="edit-key" type="text" readonly placeholder="">
                        <label for="edit-key">key</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="edit-value" name="edit-value" type="text" placeholder="">
                        <label for="edit-value">value</label>
                    </div>
                    <div>
                        <input name="id" type="hidden" value="{{.CCC.ProjectId}}">
                        <input name="name" type="hidden" value="{{.CCC.Name}}">
                        <input name="env" type="hidden" value="{{.CCC.Env}}">
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <a class="waves-effect waves-red btn-flat modal-action modal-close right">取消</a>
                        <button class="btn blue waves-effect right submit" type="submit" name="action" onclick="return checkEditConfig()">确定
                            <i class="mdi-content-send right"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="new-version" class="modal">
    <div class="modal-content">
        <div class="row">
            <h5 class="left">新版本</h5>
        </div>
    </div>
    <div class="divider"></div>
    <div class="modal-content">
        <div class="row">
            <form id="new-version-form" method="post" action="/config/newver">
                <div class="row">
                    <div class="input-field col s6">
                        <label>当前版本号：{{.CCC.ActiveVersion}}</label>
                    </div>
                    <div class="input-field col s6">
                        <label>最大版本号：{{.CCC.LatestVersion}}</label>
                    </div>
                    <div>
                        <input name="id" type="hidden" value="{{.CCC.ProjectId}}">
                        <input name="name" type="hidden" value="{{.CCC.Name}}">
                        <input name="env" type="hidden" value="{{.CCC.Env}}">
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <label>新建版本会将“最大版本号”增加1，并将“当前版本号”切换到新建的版本，同时复制当前配置到新版本中，你确定吗？</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <a class="waves-effect waves-red btn-flat modal-action modal-close right">取消</a>
                        <button class="btn blue waves-effect right submit" type="submit" name="action">确定
                            <i class="mdi-content-send right"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="change-version" class="modal">
    <div class="modal-content">
        <div class="row">
            <h5 class="left">切换版本</h5>
        </div>
    </div>
    <div class="divider"></div>
    <div class="modal-content">
        <div class="row">
            <form id="change-version-form" method="post" action="/config/chver">
                <div class="container">
                    <div class="section">
                        <div class="row">
                            <div class="input-field col s6">
                                <label>当前版本号：{{.CCC.ActiveVersion}}</label>
                            </div>
                            <div class="input-field col s6">
                                <label>最大版本号：{{.CCC.LatestVersion}}</label>
                            </div>
                            <div>
                                <input name="id" type="hidden" value="{{.CCC.ProjectId}}">
                                <input name="name" type="hidden" value="{{.CCC.Name}}">
                                <input name="env" type="hidden" value="{{.CCC.Env}}">
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="row">
                            <div class="input-field col s12">
                                <input id="chver" name="chver" type="text">
                                <label for="chver">切换到版本号：</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <a class="waves-effect waves-red btn-flat modal-action modal-close right">取消</a>
                                <button class="btn blue waves-effect right submit" type="submit" name="action" onclick="return checkChangeVersion({{.CCC.LatestVersion}})">确定
                                    <i class="mdi-content-send right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ================================================
    Scripts
    ================================================ -->

<!-- jQuery Library -->
<script type="text/javascript" src="/statics/js/plugins/jquery-1.11.2.min.js"></script>
<!--angularjs-->
<script type="text/javascript" src="/statics/js/plugins/angular.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="/statics/js/materialize.min.js"></script>
<!--prism-->
<script type="text/javascript" src="/statics/js/plugins/prism/prism.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="/statics/js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- data-tables -->
<script type="text/javascript" src="/statics/js/plugins/data-tables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/statics/js/plugins/data-tables/data-tables-script.js"></script>
<!-- chartist -->
<script type="text/javascript" src="/statics/js/plugins/chartist-js/chartist.min.js"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="/statics/js/plugins.min.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="/statics/js/custom-script.js"></script>


<script type="text/javascript">
    /*Show entries on click hide*/
    $(document).ready(function(){
        $(".dropdown-content.select-dropdown li").on( "click", function() {
            var that = this;
            setTimeout(function(){
                if($(that).parent().hasClass('active')){
                    $(that).parent().removeClass('active');
                    $(that).parent().hide();
                }
            },100);
        });
    });

    function checkAddConfig() {
        var key,value;
        key = $("#add-key").val();
        value = $("#add-value").val();
        if (key == "") {
            alert("请填写key！");
            return false;
        }
        if (value == "") {
            alert("请填写value！");
            return false;
        }
        if (/\s+/.test(key)) {
            alert("key不能包含空白字符！");
            return false;
        }
        if (/\s+/.test(value)) {
            alert("value不能包含空白字符！");
            return false;
        }
        return true;
    }

    function checkEditConfig() {
        var key,value;
        value = $("#edit-value").val();

        if (value == "") {
            alert("请填写value！");
            return false;
        }

        if (/\s+/.test(value)) {
            alert("value不能包含空白字符！");
            return false;
        }
        return true;
    }

    function checkChangeVersion(lastver) {
        var chversion;
        chversion = $("#chver").val();

        if (chversion=="") {
            alert("请输入数字");
            return false;
        }

        if (/^(0|([1-9]\d*))$/.test(chversion)) {
            if (chversion*1 > lastver) {
                alert("请输入小于等于“最大版本号”的数字");
                return false;
            }
        }else {
            alert("数字格式不对");
            return false;
        }
    }

    function delConfig(obj,confKey) {
        var r = confirm("删除配置后将不能恢复，你确定吗？");
        if (r==true) {
            var project_id = "{{.CCC.ProjectId}}";
            var project_env = "{{.CCC.Env}}";
            $.ajax({
                type:'post',
                url:'/config/del',
                data:{id:project_id,env:project_env,key:confKey},
                datatype:'text',
                success: function (status) {
                    if (status=='succeed') {
                        var index = obj.parentNode.parentNode.rowIndex;
                        var table = document.getElementById("data-table-simple");
                        table.deleteRow(index);
                    } else {
                        alert("发生错误！");
                    }
                }
            });
        }
    }

    //"z-index: 1003; display: block; opacity: 1; transform: scaleX(1); top: 10%;"

    function editConfig(key,value) {
        $("#edit-key").val(key);
        $("#edit-value").val(value);
    }

</script>

</body>

</html>